<style>
    .layui-breadcrumb{ display: block; box-sizing: border-box; padding: 15px 30px;}

    .layui-elem-field{ position: relative;}
    .layui-elem-field.user legend{float: right; margin-top: -14px;background: #fff;	}
    .layui-elem-field.title legend{ width: 100%; text-align: center; background: none;}
    .layui-elem-field.title .title_btn{ position: absolute; right: 20px; top: -50px;}
    .chat_box .chat_attr{ width: 100%; text-align: center; margin-bottom: 20px; color: #a2156a;}
    .chat_box .chat_attr span{ margin:0 10px; color: #999;}
    .chat_box .chat_title_content { width: 100%; box-sizing: border-box; padding: 10px 20px;}
    .chat_box .chat_title_content .chat_title_content_img{ width: 100%; margin-bottom: 20px;}
    .chat_box .chat_title_content .chat_title_content_img img{ max-width: 80%; border: 1px solid #ddd; margin-right: 15px; cursor: pointer;}


    .chat_box .chat_news_box{ width: 100%; padding: 10px 10px 10px 160px; min-height: 200px; box-sizing: border-box; position: relative; overflow: hidden;}
    .chat_box .chat_news_box .head_portrait{ position: absolute; box-sizing: border-box; width: 160px; padding: 10px; text-align: center; left: 0px; word-wrap:break-word}
    .chat_box .chat_news_box .head_portrait img{ width: 80px; height: 80px; border-radius: 40px; overflow: hidden; border: 1px solid #ddd; box-shadow: 0px 0px 10px #888; margin-bottom: 10px;}
    .chat_box .chat_news_box .head_portrait p{ margin: 0px;}
    .chat_box .chat_news_box .head_portrait .time{ font-size: 12px;}
    .chat_box .chat_news_box .chat_content{ position: relative; max-width: 80%; padding: 10px; min-height: 120px; border: 1px solid #ddd; border-radius: 10px; word-wrap:break-word; float: left; background: #fff}
    .chat_box .chat_news_box .chat_content:after{ content: ""; position: absolute; width: 0px; height: 0px; left: -10px; top: 30px; border-top: 10px solid transparent; border-right: 10px solid #fff; border-bottom: 10px solid transparent;}
    .chat_box .chat_news_box .chat_content:before{ content: ""; position: absolute; width: 0px; height: 0px; left: -11px; top: 28px; border-top: 12px solid transparent; border-right: 11px solid #ddd; border-bottom: 12px solid transparent;}
    .chat_box .chat_news_box .chat_content img{ max-width: 100%; max-height: 200px !important; margin-bottom: 10px; cursor: pointer;}

    .chat_box .chat_news_box.user{ padding: 10px 160px 10px 10px;}
    .chat_box .chat_news_box.user .head_portrait{ left: auto; right: 0px;}
    .chat_box .chat_news_box.user .chat_content{ float: right; text-align: right; background: #e9ffea;}
    .chat_box .chat_news_box.user .chat_content p{ text-align: left;}
    .chat_box .chat_news_box.user .chat_content:after{border-right:none; left: auto; right: -10px; border-left: 10px solid #e9ffea;}
    .chat_box .chat_news_box.user .chat_content:before{border-right:none; left: auto; right: -11px; border-left: 11px solid #ddd;}


    .swMain {
        position:relative;
        margin:0 auto;
        padding:0;
        border:0px solid #CCC;
        overflow:hidden;
        width:100%;
        margin-bottom: 15px;
    }
    .swMain .stepContainer {
        display:block;
        position:relative;
        margin:0;
        padding:0;
        border:0px solid #CCC;
        overflow:hidden;
        clear:both;
        height:300px;
    }

    .swMain .stepContainer div.content {
        display:block;
        position:absolute;
        float:left;
        margin:0;
        padding:5px;
        border:1px solid #CCC;
        font:normal 12px Verdana, Arial, Helvetica, sans-serif;
        color:#5A5655;
        background-color:#F8F8F8;
        height:300px;
        text-align:left;
        overflow:visible;
        z-index:88;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        width:968px;
        clear:both;
    }

    .swMain div.actionBar {
        display:block;
        position:relative;
        clear:both;
        margin:          3px 0 0 0;
        border:          1px solid #CCC;
        padding:         0;
        color:           #5A5655;
        background-color:#F8F8F8;
        height:40px;
        text-align:left;
        overflow:auto;
        z-index:88;

        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        left:0;
    }

    .swMain .stepContainer .StepTitle {
        display:block;
        position:relative;
        margin:0;
        border:1px solid #E0E0E0;
        padding:5px;
        font:bold 16px Verdana, Arial, Helvetica, sans-serif;
        color:#5A5655;
        background-color:#E0E0E0;
        clear:both;
        text-align:left;
        z-index:88;
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
    }
    .swMain ul.anchor {
        position:relative;
        display:block;
        float:left;
        list-style:none;
        padding:0px;
        margin:10px 0;
        clear:both;
        border:0px solid #CCCCCC;
        background:transparent; /*#EEEEEE */
        width: 100%;
    }
    .swMain ul.anchor li{
        position:relative;
        display:block;
        margin:0;
        padding:0;
        padding-left:3px;
        padding-right:3px;
        border:0px solid #E0E0E0;
        float:left;
        width: 19%;
    }
    /* Anchor Element Style */
    .swMain ul.anchor li a {
        display:block;
        position:relative;
        float:left;
        text-align: center;
        margin:0;
        padding:0;
        height:70px;
        width:100%;
        text-decoration:none;
        outline-style:none;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        z-index:99;
    }
    .swMain ul.anchor li a .stepNumber{
        position:relative;
        /*float:left;*/
        display: inline-block;
        width:50px;
        text-align:center;
        line-height: 70px;
        padding:0px;
        padding-top:0;
        font:bold 55px Verdana, Arial, Helvetica, sans-serif;
    }
    .swMain ul.anchor li a .stepDesc{
        position:relative;
        display:block;
        /*float:left;*/
        display: inline-block;
        text-align:left;
        padding:5px;

        font:bold 20px Verdana, Arial, Helvetica, sans-serif;
    }
    .swMain ul.anchor li a .stepDesc small{
        font:normal 12px Verdana, Arial, Helvetica, sans-serif;
    }
    .swMain ul.anchor li a.selected{
        color:#F8F8F8;
        background:#EA8511;  /* EA8511 */
        border:1px solid #EA8511;
        cursor:text;
        -moz-box-shadow:0px 0px 8px #888;
        -webkit-box-shadow:0px 0px 8px #888;
        box-shadow:0px 0px 8px #888;
    }
    .swMain ul.anchor li a.selected:hover {
        color:#F8F8F8;
        background:#EA8511;
    }

    .swMain ul.anchor li a.done {
        position:relative;
        color:#FFF;
        background:#8CC63F;
        border:1px solid #8CC63F;
        z-index:99;
    }
    .swMain ul.anchor li a.done:hover {
        color:#5A5655;
        background:#8CC63F;
        border:1px solid #5A5655;
    }
    .swMain ul.anchor li a.disabled {
        color:#CCCCCC;
        background:#F8F8F8;
        border:1px solid #CCC;
        cursor:text;
    }
    .swMain ul.anchor li a.disabled:hover {
        color:#CCCCCC;
        background:#F8F8F8;
    }

    .swMain ul.anchor li a.error {
        color:#6c6c6c !important;
        background:#f08f75 !important;
        border:1px solid #fb3500 !important;
    }
    .swMain ul.anchor li a.error:hover {
        color:#000 !important;
    }

    .swMain .buttonNext {
        display:block;
        float:right;
        margin:5px 3px 0 3px;
        padding:5px;
        text-decoration:none;
        text-align:center;
        font:bold 13px Verdana, Arial, Helvetica, sans-serif;
        width:100px;
        color:#FFF;
        outline-style:none;
        background-color:#5A5655;
        border:1px solid #5A5655;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .swMain .buttonDisabled {
        color:#F8F8F8  !important;
        background-color:#CCCCCC !important;
        border:1px solid #CCCCCC  !important;
        cursor:text;
    }
    .swMain .buttonPrevious {
        display:block;
        float:right;
        margin:5px 3px 0 3px;
        padding:5px;
        text-decoration:none;
        text-align:center;
        font:bold 13px Verdana, Arial, Helvetica, sans-serif;
        width:100px;
        color:#FFF;
        outline-style:none;
        background-color:#5A5655;
        border:1px solid #5A5655;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }
    .swMain .buttonFinish {
        display:block;
        float:right;
        margin:5px 10px 0 3px;
        padding:5px;
        text-decoration:none;
        text-align:center;
        font:bold 13px Verdana, Arial, Helvetica, sans-serif;
        width:100px;
        color:#FFF;
        outline-style:none;
        background-color:#5A5655;
        border:1px solid #5A5655;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
    }

    /* Form Styles */

    .txtBox {
        border:1px solid #CCCCCC;
        color:#5A5655;
        font:13px Verdana,Arial,Helvetica,sans-serif;
        padding:2px;
        width:430px;
    }
    .txtBox:focus {
        border:1px solid #EA8511;
    }

    .swMain .loader {
        position:relative;
        display:none;
        float:left;
        margin:2px 0 0 2px;
        padding:8px 10px 8px 40px;
        border:1px solid #FFD700;
        font:bold 13px Verdana, Arial, Helvetica, sans-serif;
        color:#5A5655;
        background:#FFF url(../images/loader.gif) no-repeat 5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        z-index:998;
    }
    .swMain .msgBox {
        position:relative;
        display:none;
        float:left;
        margin:4px 0 0 5px;
        padding:5px;
        border:1px solid #FFD700;
        background-color:#FFFFDD;
        font:normal 12px Verdana, Arial, Helvetica, sans-serif;
        color:#5A5655;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        z-index:999;
        min-width:200px;
    }
    .swMain .msgBox .content {
        font:normal 12px Verdana,Arial,Helvetica,sans-serif;
        padding:0px;
        float:left;
    }
    .swMain .msgBox .close {
        border:1px solid #CCC;
        border-radius:3px;
        color:#CCC;
        display:block;
        float:right;
        margin:0 0 0 5px;
        outline-style:none;
        padding:0 2px 0 2px;
        position:relative;
        text-align:center;
        text-decoration:none;
    }
    .swMain .msgBox .close:hover{
        color:#EA8511;
        border:1px solid #EA8511;
    }
</style>
<div class="swMain">
    <ul class="anchor">
        {if condition="$info['state'] eq 1"}
        <li><a href="#step-1" class="selected" isdone="1" rel="1"><span class="stepNumber">1</span><span class="stepDesc">待处理<br><small>To be treated</small></span></a></li>
        <li><a href="#step-2" class="disabled" isdone="1" rel="2"><span class="stepNumber">2</span><span class="stepDesc">已处理<br><small>Already processed</small></span></a></li>
        <li><a href="#step-3" class="disabled" isdone="1" rel="3"><span class="stepNumber">3</span><span class="stepDesc">已反馈<br><small>Feedback</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="1" rel="4"><span class="stepNumber">4</span><span class="stepDesc">已完结<br><small>Have finished</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="0" rel="4"><span class="stepNumber">5</span><span class="stepDesc">已好评<br><small>Have been praised</small></span></a></li>
        {elseif condition="$info['state'] eq 2"}
        <li><a href="#step-1" class="done" isdone="1" rel="1"><span class="stepNumber">1</span><span class="stepDesc">待处理<br><small>To be treated</small></span></a></li>
        <li><a href="#step-2" class="selected" isdone="1" rel="2"><span class="stepNumber">2</span><span class="stepDesc">已处理<br><small>Already processed</small></span></a></li>
        <li><a href="#step-3" class="disabled" isdone="1" rel="3"><span class="stepNumber">3</span><span class="stepDesc">已反馈<br><small>Feedback</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="1" rel="4"><span class="stepNumber">4</span><span class="stepDesc">已完结<br><small>Have finished</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="0" rel="4"><span class="stepNumber">5</span><span class="stepDesc">已好评<br><small>Have been praised</small></span></a></li>
        {elseif condition="$info['state'] eq 3"}
        <li><a href="#step-1" class="done" isdone="1" rel="1"><span class="stepNumber">1</span><span class="stepDesc">待处理<br><small>To be treated</small></span></a></li>
        <li><a href="#step-2" class="done" isdone="1" rel="2"><span class="stepNumber">2</span><span class="stepDesc">已处理<br><small>Already processed</small></span></a></li>
        <li><a href="#step-3" class="selected" isdone="1" rel="3"><span class="stepNumber">3</span><span class="stepDesc">已反馈<br><small>Feedback</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="1" rel="4"><span class="stepNumber">4</span><span class="stepDesc">已完结<br><small>Have finished</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="0" rel="4"><span class="stepNumber">5</span><span class="stepDesc">已好评<br><small>Have been praised</small></span></a></li>
        {elseif condition="$info['state'] eq 4"}
        <li><a href="#step-1" class="done" isdone="1" rel="1"><span class="stepNumber">1</span><span class="stepDesc">待处理<br><small>To be treated</small></span></a></li>
        <li><a href="#step-2" class="done" isdone="1" rel="2"><span class="stepNumber">2</span><span class="stepDesc">已处理<br><small>Already processed</small></span></a></li>
        <li><a href="#step-3" class="done" isdone="1" rel="3"><span class="stepNumber">3</span><span class="stepDesc">已反馈<br><small>Feedback</small></span></a></li>
        <li><a href="#step-4" class="selected" isdone="1" rel="4"><span class="stepNumber">4</span><span class="stepDesc">已完结<br><small>Have finished</small></span></a></li>
        <li><a href="#step-4" class="disabled" isdone="0" rel="4"><span class="stepNumber">5</span><span class="stepDesc">已好评<br><small>Have been praised</small></span></a></li>
        {else/}
        <li><a href="#step-1" class="done" isdone="1" rel="1"><span class="stepNumber">1</span><span class="stepDesc">待处理<br><small>To be treated</small></span></a></li>
        <li><a href="#step-2" class="done" isdone="1" rel="2"><span class="stepNumber">2</span><span class="stepDesc">已处理<br><small>Already processed</small></span></a></li>
        <li><a href="#step-3" class="done" isdone="1" rel="3"><span class="stepNumber">3</span><span class="stepDesc">已反馈<br><small>Feedback</small></span></a></li>
        <li><a href="#step-4" class="done" isdone="1" rel="4"><span class="stepNumber">4</span><span class="stepDesc">已完结<br><small>Have finished</small></span></a></li>
        <li><a href="#step-4" class="selected" isdone="0" rel="4"><span class="stepNumber">5</span><span class="stepDesc">已好评<br><small>Have been praised</small></span></a></li>
        {/if}

    </ul>
</div>

<fieldset class="layui-elem-field">
    <div class="layui-field-box layerDemo">
        {if condition="$info['state'] neq 3"}
        <ob_link> <button class="layui-btn" ><a  href="{:url('update_info',['id'=>$info['id']])}" class="ajax-get" style="color: white"> 结束工单</a></button></ob_link>

        {/if}
    </div>
</fieldset>






<!--标题-->
<fieldset class="layui-elem-field layui-field-title chat_box title" style="margin-top: 50px;">
    <legend>{$info['title']}</legend>
    <div class="chat_attr">
        <span>分类：{$info.cate.classname}</span>|
        <span>用户：{$info.user.username}</span>|
        <span>标题：{$info.title}</span>|
        <span>时间：{$info['create_time']}</span>|
        {if condition="$info['state'] eq 0"}
        <span>状态：待处理</span>
        {elseif condition="$info['state'] eq 1"}
        <span>状态：已处理</span>
        {elseif condition="$info['state'] eq 2"}
        <span>状态：已反馈</span>
        {elseif condition="$info['state'] eq 3"}
        <span>状态：已完结</span>
        {else/}
        <span>状态：已好评</span>
        {/if}
    </div>


    <div class="chat_title_content">
        <div class="chat_title_content_img">
            <p>{$info['content']}</p>
            <img src="{$info['image']}">
        </div>
    </div>
</fieldset>


{volist name="comment" id="vo"}
{if condition="$vo['is_admin'] eq 1 and $vo['wid'] eq $info['id']"}
<!--管理员列表左侧-->
<fieldset class="layui-elem-field layui-field-title chat_box" style="margin-top: 50px;">
    <legend>管理员</legend>
    <div class="chat_news_box">
        <div class="head_portrait">
            <p>帐号:{$vo['admin_name']}</p>
            <p>IP地址:127.0.0.1</p>
            <p class="time">{$vo['create_time']}</p>

        </div>
        <div class="chat_content">
            <!--<p>好的谢谢！</p>-->
            <p>{$vo.content}</p>
            <!-- <img alt="2018高清图片" title="2018图片下载" class="lazy" src="http://img95.699pic.com/photo/40007/8840.jpg_wh300.jpg" data-original="http://img95.699pic.com/photo/40007/8840.jpg_wh300.jpg" width="634.24947145877" height="300" style="display: inline;"> -->
        </div>
    </div>
</fieldset>
<!--管理员列表左侧-->

{elseif condition="$vo['is_admin'] eq 0 and $vo['wid'] eq $info['id']"}

<!--用户反馈列表右侧-->
<fieldset class="layui-elem-field layui-field-title chat_box user" style="margin-top: 50px;">
    <legend>用户</legend>
    <div class="chat_news_box user">
        <div class="head_portrait">
            <p><img src="{$vo.user.avtar}"></p>
            <p>帐号:{$vo.user.username}</p>
            <p>姓名:{$vo.user.nickname}</p>
            <p>IP地址:127.0.0.1</p>
            <p class="time">{$vo['create_time']}</p>

        </div>
        <div class="chat_content">
            <!--<p>好的谢谢！</p>-->
            <p>{$vo.content}</p>
            <!-- <img class="currentImg" id="currentImg" onload="alog &amp;&amp; alog('speed.set', 'c_firstPageComplete', +new Date); alog.fire &amp;&amp; alog.fire('mark');" src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png" width="1116.4444444444" height="628" style="top: 143px; left: 0px; width: 778px; height: 437.625px; cursor: pointer;" log-rightclick="p=5.102" title="点击查看源网页"> -->
        </div>
    </div>
</fieldset>
<!--用户反馈列表右侧-->
{/if}
{/volist}

<div class="x-body">
    <form class="layui-form form_single" action="{:url()}" method="post">

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>内容
            </label>
            <div class="layui-input-block">
                <textarea class="form-control textarea_editor" name="content" placeholder="请输入内容"></textarea>
                {:widget('editor/index', array('name'=> 'content','value'=> ''))}
            </div>
        </div>





        <div class="box-footer">

            <input type="hidden" name="id" value="{$info['id']|default='0'}"/>

            {include file="layout/edit_btn_group"/}

        </div>

    </form>
</div>



<script type="text/javascript">

    ob.setValue("is_hide", {$info.is_hide|default=0});
    ob.setValue("is_shortcut", {$info.is_shortcut|default=0});
    ob.setValue("pid", {$info.pid|default=0});

</script>